<template>
  <view class="min-h-screen bg-white">
    <!-- 顶部标题栏 -->
    <view class="header flex justify-between items-center px-4 py-3 border-b border-gray-200">
      <text class="text-lg font-medium">感情状态</text>
      <text class="text-primary" @tap="handleConfirm">确认</text>
    </view>

    <!-- picker 选择器 -->
    <view class="mt-4">
      <picker @change="handlePickerChange" :value="currentIndex" :range="statusLabels">
        <view class="picker-box flex items-center px-4 py-3 border-b border-gray-200">
          <text class="text-gray-700">{{ statusLabels[currentIndex] || '请选择' }}</text>
        </view>
      </picker>
    </view>

    <!-- 取消按钮 -->
    <view class="cancel-button px-4 mt-6">
      <button class="w-full py-3 text-center text-gray-600 border border-gray-300 rounded-lg">
        取消
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const statusOptions = [
  { label: '单身', value: 'single' },
  { label: '恋爱中', value: 'in_relationship' },
]

const statusLabels = statusOptions.map((item) => item.label)
const currentIndex = ref(0)
const selectedStatus = ref(statusOptions[0].value)

const handlePickerChange = (e: any) => {
  const index = e.detail.value
  currentIndex.value = index
  selectedStatus.value = statusOptions[index].value
}

const handleConfirm = () => {
  if (selectedStatus.value) {
    uni.showToast({
      title: '保存成功',
      icon: 'success',
    })
  }
}
</script>

<style scoped>
.picker-box {
  border-bottom: 1px solid #e5e7eb;
}
</style>
